<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="common.css">
<script src="common.js"></script>
<script src="../dist/jslib.min.js"></script>
</head>
<body>
	<a name="js"></a>
	<h1>$js()</h1>
	<h2>定义</h2>
	<p>$js(selector,context) : JSLib</p>
	<p>$js() : JSLib</p>
	<p>$js(HtmlObject) : JSLib</p>
	<p>$js(HtmlString) : JSLib</p>
	<p>$js(HtmlElement) : JSLib</p>
	<h2>参数</h2>
	<table>
		<tr>
			<td>selector</td>
			<td>[可选]指定选择器字符串，如果此参数不传递则返回当前脚本节点。</td>
		</tr>
		<tr>
			<td>context</td>
			<td>[可选]筛选上下文，如果不传递则默认为document。</td>
		</tr>
		<tr>
			<td>HtmlObject</td>
			<td>[可选]HTML元素描述对象。</td>
		</tr>
		<tr>
			<td>HtmlString</td>
			<td>[可选]指定的HTML字符串。</td>
		</tr>
		<tr>
			<td>HtmlElement</td>
			<td>[可选]指定HTML节点。</td>
		</tr>
	</table>
	<h2>说明</h2>
	<h3>selecter</h3>
	<p>使用selecter按照指定的选择器字符串，从指定上下文中匹配节点。常用的选择器字符串规则，请参阅下面的表格：</p>
	<table border="1" style="margin-left: 2em;">
		<tr>
			<th>选择器</th>
			<th>示例</th>
			<th>说明</th>
		</tr>
		<tr>
			<td>element</td>
			<td>$js('div')</td>
			<td>匹配所有div节点</td>
		</tr>
		<tr>
			<td>#id</td>
			<td>$js('#new1')</td>
			<td>匹配所有id="new1"的节点</td>
		</tr>
		<tr>
			<td>.class</td>
			<td>$js('.class1')</td>
			<td>匹配所有class="class1"的节点</td>
		</tr>
		<tr>
			<td>@name</td>
			<td>$js('@name1')</td>
			<td>匹配所有name="name1"的节点</td>
		</tr>
	</table>
	<p>JSLib中大部分内置方法返回值都是JSLib对象，只要返回的是JSLib对象的，都可以实现链式调用。</p>
	<p>@name选择器，与其他类型的选择器有一个使用上的区别，这个选择器不支持属性选择，因为做为input名称时有可能包括中括号。如果需要同时使用name和属性选择，则可以使用[name='name'][attr='attr']的形式来代替。例如：</p>
	<fieldset>
		<legend>HTML</legend>
		<pre>&lt;input type=&quot;text&quot; name=&quot;a[]&quot; id=&quot;a0&quot; value=&quot;a0&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;a[]&quot; id=&quot;a1&quot; value=&quot;a1&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;b[name]&quot; id=&quot;b0&quot; value=&quot;b0&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;c&quot; id=&quot;c0&quot; value=&quot;c0&quot;&gt;</pre>
	</fieldset>
	<fieldset>
		<legend>JavaScript</legend>
		<pre>console.log($js('@a[]'));
//return elements [input#a0,input#a1]

console.log($js('@b[name]));
//return elements [input#b0]

console.log($js('@c[value=c0]'));
//return elements []

console.log($js('[name=&quot;c&quot;][value=c0]'));
//return elements [input#c0]</pre>
	</fieldset>
	<p></p>
	<h3>HtmlObject</h3>
	<p>HtmlObject是一个基于object描述的HtmlElement，这个仅仅是为了简化在JavaScript下生成HTML代码，示例代码：</p>
	<fieldset>
		<legend>HtmlObject示例</legend>
		<pre>
{
	tagName:'img',
	src:'../upload/demo1.png',
	parent:test_element
}
		</pre>
		<p>//上述示例可以生成代码：&lt;img src="../upload/demo1.png">，并且这个元素自动添加到test_element节点下。</p>
	</fieldset>
	<p>HtmlObject支持的属性：</p>
	<table border="1" style="margin-left: 2em;">
		<tr>
			<td>parent:document.body</td>
			<td>上层节点</td>
		</tr>
		<tr>
			<td>tagName:'div'</td>
			<td>节点名称。默认：div。</td>
		</tr>
		<tr>
			<td>autocomplete:''</td>
			<td>HtmlElement.autocomplete</td>
		</tr>
		<tr>
			<td>backgroundColor:""</td>
			<td>HtmlElement.style.backgroundColor背景色</td>
		</tr>
		<tr>
			<td>backgroundImage:""</td>
			<td>HtmlElement.style.backgroundImage背景图片路径</td>
		</tr>
		<tr>
			<td>className:""</td>
			<td>HtmlElement.class节点CSS类名称</td>
		</tr>
		<tr>
			<td>color:""</td>
			<td>HtmlElement.style.color</td>
		</tr>
		<tr>
			<td>cursor:""</td>
			<td>HtmlElement.style.cursor属性</td>
		</tr>
		<tr>
			<td>checked:false|true</td>
			<td>HtmlElement.checked</td>
		</tr>
		<tr>
			<td>child:{...}|[{...},...]</td>
			<td>子元素。数据结构与HtmlObject相同。注意：child元素中的parent属性无效。</td>
		</tr>
		<tr>
			<td>colspan:1</td>
			<td>el.colspan单元格列合并。</td>
		</tr>
		<tr>
			<td>data:……</td>
			<td>el.data附加数据</td>
		</tr>
		<tr>
			<td>disabled:false|true</td>
			<td>el.disabled</td>
		</tr>
		<tr>
			<td>display:''</td>
			<td>el.style.display</td>
		</tr>
		<tr>
			<td>draggable:false|true</td>
			<td>el.draggable</td>
		</tr>
		<tr>
			<td>float:""</td>
			<td>el.style.float</td>
		</tr>
		<tr>
			<td>fontSize:''</td>
			<td>el.style.fontSize</td>
		</tr>
		<tr>
			<td>html:''</td>
			<td>el.innerHTML。此属性优先级高于其他属性。</td>
		</tr>
		<tr>
			<td>id:''</td>
			<td>el.id	节点ID</td>
		</tr>
		<tr>
			<td>left:''</td>
			<td>el.style.left</td>
		</tr>
		<tr>
			<td>name:''</td>
			<td>el.name</td>
		</tr>
		<tr>
			<td>width:''</td>
			<td>el.style.width</td>
		</tr>
		<tr>
			<td>rel:""</td>
			<td>el.rel</td>
		</tr>
		<tr>
			<td>required:false|true</td>
			<td>el.required</td>
		</tr>
		<tr>
			<td>rowspan:1</td>
			<td>el.rowspan单元格行合并。</td>
		</tr>
		<tr>
			<td>src:''</td>
			<td>el.src</td>
		</tr>
		<tr>
			<td>style:''</td>
			<td>el.style</td>
		</tr>
		<tr>
			<td>title:''</td>
			<td>el.title</td>
		</tr>
		<tr>
			<td>tip:''</td>
			<td>el.tip用于自定义tip消息显示</td>
		</tr>
		<tr>
			<td>top:""</td>
			<td>el.style.top</td>
		</tr>
		<tr>
			<td>zIndex:''</td>
			<td>el.style.zIndex;</td>
		</tr>
		<tr>
			<td>onclick:function(){}</td>
			<td>onclick事件，鼠标点击时触发。</td>
		</tr>
		<tr>
			<td>ondblclick:function(){}</td>
			<td>ondblclick事件，鼠标双击时触发。</td>
		</tr>
		<tr>
			<td>onmousedown:function(){}</td>
			<td>onmousedown事件，鼠标按下时触发。</td>
		</tr>
		<tr>
			<td>onmouseenter:function(){}</td>
			<td>onmouseenter事件，鼠标进入元素时触发。</td>
		</tr>
		<tr>
			<td>onmousemove:function(){}</td>
			<td>onmousemove事件，鼠标移动时触发。</td>
		</tr>
		<tr>
			<td>onmouseup:function(){}</td>
			<td>onmouseup事件，鼠标按起时触发。</td>
		</tr>
		<tr>
			<td>onmouseout:function(){}</td>
			<td>onmouseout事件，鼠标移入时触发。</td>
		</tr>
	</table>
	<h2>示例selecter</h2>
	<fieldset>
		<legend>HTML</legend>
		<pre>&lt;div id="a1">
	&lt;div id="a2">a2 text&lt;/div>
	&lt;div id="a3">a3 text&lt;/div>
&lt;/div></pre>
	</fieldset>
	<fieldset>
		<legend>JavaScript</legend>
		<pre>$js('#a2').addClass('newclass');</pre>
	</fieldset>
	<fieldset>
		<legend>执行后原HTML信息变为</legend>
		<pre>&lt;div id="a1">
	&lt;div id="a2" class="newclass">a2 text&lt;/div>
	&lt;div id="a3">a3 text&lt;/div>
&lt;/div></pre>
	</fieldset>
	<h2>示例HtmlObject</h2>
	<fieldset>
		<legend>演示</legend>
		<fieldset>
			<legend>显示区域</legend>
			<pre id="js_demo_1"></pre>
		</fieldset>
		<fieldset>
			<legend>执行前HTML</legend>
			<pre id="js_demo_show1"></pre>
		</fieldset>
		<fieldset>
			<legend>执行的JavaScript</legend>
			<pre id="js_demo_show3"></pre>
		</fieldset>
		<fieldset>
			<legend>执行后HTML</legend>
			<pre id="js_demo_show2"></pre>
		</fieldset>
		<script>$js('#js_demo_show1').text($js('#js_demo_1').outerHTML()).unindent({ignore:1});</script>
		<script></script>
		<script id="js_demo_js1">
			$js({parent:js_demo_1,color:'#f00',html:'text1'});
		</script>
		<script>$js('#js_demo_show2').text($js('#js_demo_1').outerHTML()).unindent({ignore:1});</script>
		<script>$js('#js_demo_show3').text($js('#js_demo_js1').outerHTML()).unindent({ignore:1});</script>
	</fieldset>
	<h2>版本</h2>
	<p>本方法自0.0.0版本开始支持。</p>
	<p>自0.0.1版本开始，$js()改为返回为当前脚本的父节点。之前的版本是返回一个空对象。</p>
	<p>自0.1.0版本开始，@name选择器不再支持属性选择。$js()从返回当前脚本的父节点，改为返回当前节点。</p>
	<p>自0.1.11版本开始，支持$js(HtmlObject)方法。</p>
</body>
</html>